<template>
  <div style="display: flex;">
      <div style="display: flex;">
        <el-input v-model="findparams.keyword" placeholder="输入通知标题请进行查询"></el-input>
        <el-button @click="getTableData" style="margin-left: 10px;">搜索</el-button>
      </div>
      <div style="display: flex;">
        <el-button @click="dialogShow(null)" style="margin-left: 10px;">新建通知</el-button>
      </div>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column prop="title" label="通知标题" width="auto"/>
    <el-table-column prop="publishTime" label="发布时间" width="auto" />
    <el-table-column prop="hadRead" label="是否被阅读" width="auto">
       <template #default="scoped">
        <el-button type="text" v-if="scoped.row.hadRead > 0 " style="color: green;">已阅读</el-button>
        <el-button type="text" v-else >未阅读</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="state" label="发布状态" width="auto">
      <template #default="scoped">
        <el-button type="text" v-if="scoped.row.state === true" style="color: green;">已发布</el-button>
        <el-button type="text" v-else style="color: red">未发布</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="state" label="操作" width="300px">
      <template #default="scoped">
        <el-button plain type="danger" v-if="scoped.row.state === true" @click="changeState(scoped.row.title,scoped.row.state)">取消</el-button>
        <el-button plain type="success" v-else @click="changeState(scoped.row.title,scoped.row.state)">发布</el-button>
        <el-button plain type="primary" @click="dialogShow(scoped.row.id)">编辑</el-button>
        <el-button plain type="primary" @click="dialogShow1(scoped.row.id)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
    <el-dialog 
      draggable
      :model-value="dialog.show"
      :title="dialog.title"
      width="700px"
      :before-close="handleClose"
      :close-on-click-modal="false">
     <Editor
      v-if="dialog.show"
      @getTableData="getTableData"
      v-model:show="dialog.show"
      :id="dialog.id"
     />
  </el-dialog>
  <el-dialog 
      draggable
      :model-value="dialog.detailshow"
      width="1000px"
      :before-close="handleClose1"
      :close-on-click-modal="false">
     <Detail
      v-if="dialog.detailshow"
      @getTableData="getTableData"
      v-model:show="dialog.detailshow"
      :id="dialog.id"
     />
  </el-dialog>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import Editor from './edit.vue'
import Detail from './detail.vue'
import Path from './path'
const options = ref([])
let tableData = ref({})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 14
})
const dialog = reactive({
  detailshow:false,
  show:false,
  title:'',
  id:null,
});
const findparams = reactive({
  keyword:null
})
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams.keyword != null){
    params.keyword = findparams.keyword
  }
  get(Path.list ,params,content => {
    tableData.value = content
  })
}
let changeState = (title,state) => {
  let text = state ? '确定要取消发布该通知么？' : '确定要发布该通知么？'
  ElMessageBox.confirm(text,'警告',{
    type:'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(()=>{
      post(Path.publish,{title,state},content =>{
        getTableData()
      })
  }).catch(()=>{})
}

function dialogShow(id){
    dialog.id = id
    dialog.show = true
}
function dialogShow1(id){
    dialog.id = id
    dialog.detailshow = true
}
// 对话框关闭事件
function handleClose(){
    // 将表单隐藏
    dialog.id = null
    dialog.show = false
} 
function handleClose1(){
    // 将表单隐藏
    dialog.id = null
    dialog.detailshow = false
} 
</script>

<style scoped lang='scss'>

</style>